var mask = document.querySelector('.mask'),
    sure_btn = document.getElementById('sure'),
    cancel_btn = document.getElementById('cancel'),
    in_search = document.getElementById('in_search'),
    sach_btn = document.getElementById('sach_btn'),
    in_company = document.getElementById('in_company'),
    in_job = document.getElementById('in_job'),
    in_salary = document.getElementById('in_salary'),
    smit_btn = document.getElementById('smit_btn'),
    delAll_btn = document.getElementById('delAll_btn'),
    lineColor_btn = document.getElementById('lineColor_btn'),
    tbody = document.querySelector('tbody'),
    icompanys = document.getElementsByClassName('icompany'),
    ijobs = document.getElementsByClassName('ijob'),
    isalarys = document.getElementsByClassName('isalary'),
    arrz = [];

if (localStorage.arrs) {
    arrz = JSON.parse(localStorage.arrs);
    display();
} else {
    arrz = [];
}


smit_btn.onclick = function() {
    if (in_company.value == '' || in_job.value == '' || in_salary.value == '') {
        alert('请补全信息，再行提交!');
        in_company.value = '';
        in_job.value = '';
        in_salary.value = '';
        return;
    } else {
        var objs = {
            id: +new Date(),
            company: in_company.value,
            job: in_job.value,
            salary: in_salary.value
        };
        arrz.push(objs);
        in_company.value = '';
        in_job.value = '';
        in_salary.value = '';
        localStorage.arrs = JSON.stringify(arrz);
        display();
    }

}


function display() {
    var str = '',
        str_s = '';
    if (arrz.length == 1) {
        str = `<tr>
                    <td>
                        <input type="checkbox">
                    </td>
                <td>
                    ${1}
                </td>
                <td>
                    <span>${arrz[0].company}</span>
                    <input class="icompany" type="text">
                </td>
                <td>
                    <span>${arrz[0].job}</span>
                    <input class="ijob" type="text">
                </td>
                <td>
                    <span>${arrz[0].salary}</span>
                    <input class="isalary" type="number">
                </td>
                <td>
                    <button disabled onclick="up(${arrz[0].id})" type="button">上移</button>
                    <button onclick="del(${arrz[0].id})" type="button">删除</button>
                    <button onclick="updata(${1},this)" type="button">修改</button>
                    <button disabled onclick="down(${arrz[0].id})" type="button">下移</button>
                </td>
            </tr>`;
    } else {
        for (var i = 0; i < arrz.length; i++) {
            if (i == 0) {
                str_s = `<tr>
                <td>
                        <input type="checkbox">
                    </td>
                <td>
                    ${i+1}
                </td>
                <td>
                    <span>${arrz[i].company}</span>
                    <input class="icompany" type="text">
                </td>
                <td>
                    <span>${arrz[i].job}</span>
                    <input class="ijob" type="text">
                </td>
                <td>
                    <span>${arrz[i].salary}</span>
                    <input class="isalary" type="number">
                </td>
                <td>
                    <button disabled onclick="up(${arrz[i].id})" type="button">上移</button>
                    <button onclick="del(${arrz[i].id})" type="button">删除</button>
                    <button onclick="updata(${i},this)" type="button">修改</button>
                    <button onclick="down(${arrz[i].id})" type="button">下移</button>
                </td>
            </tr>`;
            } else if (i == arrz.length - 1) {
                str_s = `<tr>
                <td>
                        <input type="checkbox">
                    </td>
                <td>
                    ${i+1}
                </td>
                <td>
                    <span>${arrz[i].company}</span>
                    <input class="icompany" type="text">
                </td>
                <td>
                    <span>${arrz[i].job}</span>
                    <input class="ijob" type="text">
                </td>
                <td>
                    <span>${arrz[i].salary}</span>
                    <input class="isalary" type="number">
                </td>
                <td>
                    <button onclick="up(${arrz[i].id})" type="button">上移</button>
                    <button onclick="del(${arrz[i].id})" type="button">删除</button>
                    <button onclick="updata(${i},this)" type="button">修改</button>
                    <button disabled onclick="down(${arrz[i].id})" type="button">下移</button>
                </td>
            </tr>`;
            } else {
                str_s = `<tr>
                    <td>
                        <input type="checkbox">
                    </td>
                <td>
                    ${i+1}
                </td>
                <td>
                    <span>${arrz[i].company}</span>
                    <input class="icompany" type="text">
                </td>
                <td>
                    <span>${arrz[i].job}</span>
                    <input class="ijob" type="text">
                </td>
                <td>
                    <span>${arrz[i].salary}</span>
                    <input class="isalary" type="number">
                </td>
                <td>
                    <button onclick="up(${arrz[i].id})" type="button">上移</button>
                    <button onclick="del(${arrz[i].id})" type="button">删除</button>
                    <button onclick="updata(${i},this)" type="button">修改</button>
                    <button onclick="down(${arrz[i].id})" type="button">下移</button>
                </td>
            </tr>`;
            }
            str += str_s;
        }

    }
    tbody.innerHTML = str;
}


function del(id) {
    mask.style.display = 'block';
    sure_btn.onclick = function() {
        mask.style.display = '';
        for (var i = 0; i < arrz.length; i++) {
            if (arrz[i].id == id) {
                arrz.splice(i, 1);
            }
        }
        localStorage.arrs = JSON.stringify(arrz);
        display();
    }
    cancel_btn.onclick = function() {
        mask.style.display = '';
    }
}

sach_btn.onclick = function() {
    for (var i = 0; i < arrz.length; i++) {
        if (arrz[i].company.includes(in_search.value) || arrz[i].job.includes(in_search.value)) {
            tbody.children[i].style.background = 'yellow';
        } else {
            tbody.children[i].style.background = '';
        }
    }
    in_search.value = '';
}


function updata(index, objz) {
    if (objz.innerHTML == '修改') {
        icompanys[index].style.display = 'block';
        icompanys[index].previousElementSibling.style.display = 'none';
        ijobs[index].style.display = 'block';
        ijobs[index].previousElementSibling.style.display = 'none';
        isalarys[index].style.display = 'block';
        isalarys[index].previousElementSibling.style.display = 'none';
        objz.innerHTML = '完成';
    } else {
        arrz[index].company = icompanys[index].value;
        arrz[index].job = ijobs[index].value;
        arrz[index].salary = isalarys[index].value;
        localStorage.arrs = JSON.stringify(arrz);
        display();
        icompanys[index].style.display = 'none';
        icompanys[index].previousElementSibling.style.display = 'block';
        ijobs[index].style.display = 'none';
        ijobs[index].previousElementSibling.style.display = 'block';
        isalarys[index].style.display = 'none';
        isalarys[index].previousElementSibling.style.display = 'block';
        objz.innerHTML = '修改';
    }
}

var m_select = document.querySelector('thead input'),
    s_select = document.querySelectorAll('tbody input[type="checkbox"]');

var flag = true,
    ids_arr = [];

m_select.onclick = function() {
    ids_arr = [];
    for (var i = 0; i < s_select.length; i++) {
        s_select[i].checked = this.checked;
    }
    if (this.checked) {
        ids_arr = arrz;
    } else {
        ids_arr = [];
    }
}


for (var i = 0; i < s_select.length; i++) {
    s_select[i].onclick = function() {

        ids_arr = [];
        flag = true;
        for (var j = 0; j < s_select.length; j++) {
            if (!s_select[j].checked) {
                flag = false;
            } else {
                ids_arr.push(arrz[j]);
            }
        }
        m_select.checked = flag;
    }
}

delAll_btn.onclick = function() {

    for (var i = 0; i < ids_arr.length; i++) {
        for (var j = 0; j < arrz.length; j++) {
            if (ids_arr[i].id == arrz[j].id) {
                arrz.splice(j, 1);
            } else {
                continue;
            }
        }
    }
    localStorage.arrs = JSON.stringify(arrz);
    display();
}

lineColor_btn.onclick = function() {
    if (this.innerHTML == '开启') {
        tbody.onmouseover = function(event) {
            if (event.target.parentNode.nodeName == 'TR') {
                event.target.parentNode.style.backgroundColor = 'green';
            }
        }
        tbody.onmouseout = function(event) {
            if (event.target.parentNode.nodeName == 'TR') {
                event.target.parentNode.style.backgroundColor = '';
            }
        }

        this.innerHTML = '关闭';
    } else {
        tbody.onmouseover = null;
        tbody.onmouseout = null;
        this.innerHTML = '开启';
    }
}

function up(id) {
    for (var i = 0; i < arrz.length; i++) {
        if (id == arrz[i].id) {
            if (i != 0) {
                arrz.splice(i - 1, 0, arrz.splice(i, 1)[0]);
                break;
            } else if (i == 0) {
                alert('不能上移');
                break;
            }
        }
        localStorage.arrs = JSON.stringify(arrz);
    }

    display();
}

function down(id) {
    for (var i = 0; i < arrz.length; i++) {
        if (id == arrz[i].id) {
            if (i != arrz.length - 1) {
                arrz.splice(i + 1, 0, arrz.splice(i, 1)[0]);
                break;
            } else if (i == arrz.length - 1) {
                alert('不能下移');
                break;
            }
        }
        localStorage.arrs = JSON.stringify(arrz);
    }

    display();
}